<template>
  <el-dialog
    :visible.sync="visible"
    title="修改信息"
    width="28%"
    :close-on-click-modal="false"
    :before-close="handleClose"
    append-to-body
    destroy-on-close
  >
    <div v-if="formData" class="edit-form-container">
      <!-- 只读信息展示 -->
      <el-row class="info-row" :gutter="20">
        <el-col :span="6" class="label"> 人员名称：</el-col>
        <el-col :span="18" class="value">{{ formData.realName }}</el-col>
      </el-row>
      <el-row class="info-row" :gutter="20">
        <el-col :span="6" class="label"> 终端号码：</el-col>
        <el-col :span="18" class="value">{{ formData.mobilePhone }}</el-col>
      </el-row>
      <el-row class="info-row" :gutter="20">
        <el-col :span="6" class="label"> 拍照时间：</el-col>
        <el-col :span="18" class="value">{{ formatTimestamp(formData.photoTime) }}</el-col>
      </el-row>
      <el-row class="info-row" :gutter="20">
        <el-col :span="6" class="label"> 上传时间：</el-col>
        <el-col :span="18" class="value">{{  formatTimestamp(formData.uploadTime) }}</el-col>
      </el-row>
      <el-row class="info-row" :gutter="20">
        <el-col :span="6" class="label"> 资源类别：</el-col>
        <el-col :span="18" class="value">{{ formData.resourceType }}</el-col>
      </el-row>
      <el-row class="info-row" :gutter="20">
        <el-col :span="6" class="label"> 事件类别：</el-col>
        <el-col :span="18" class="value">{{ formData.eventType }}</el-col>
      </el-row>
      <el-row class="info-row" :gutter="20">
        <el-col :span="6" class="label"> 位置描述：</el-col>
        <el-col :span="18" class="value">{{ formData.position }}</el-col>
      </el-row>

      <!-- 可编辑的备注 -->
      <el-row class="info-row" :gutter="20">
        <el-col :span="6" class="label"> 备注：</el-col>
        <el-col :span="18">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入备注信息..."
            style="width: 100%; border-radius: 8px"
          />
        </el-col>
      </el-row>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose" style="border-radius: 20px">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" style="border-radius: 20px; padding: 10px 20px">
        确 认 修 改
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'EditDialog',
  props: {
    visible: Boolean,
    formData: Object
  },
  methods: {
    handleSubmit() {
      this.$emit('submit', this.formData);
    },
    handleClose() {
      this.$emit('update:visible', false); 
    },
    formatTimestamp(timestamp, format = 'YYYY-MM-DD HH:mm:ss') {
      if (!timestamp) return '暂无';
      const date = new Date(Number(timestamp)); // 确保是数字类型
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
      const day = String(date.getDate()).padStart(2, '0');

      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return format
        .replace('YYYY', year)
        .replace('MM', month)
        .replace('DD', day)
        .replace('HH', hours)
        .replace('mm', minutes)
        .replace('ss', seconds);
    }
  },
  watch: {
    formData: {
      handler(val) {
        console.log(val);
        
        if (val && this.visible) {
          console.log('当前编辑数据:', val);
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style scoped>
.edit-form-container {
  padding: 0 20px;
  font-size: 14px;
  color: #555;
}

.info-row {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.label {
  font-weight: 600;
  color: #333;
  text-align: right;
}

.value {
  color: #666;
  word-break: break-word;
}

/* 自定义滚动条（可选） */
::v-deep .el-dialog__body {
  max-height: 50vh;
  overflow-y: auto;
}

::v-deep .el-dialog__body::-webkit-scrollbar {
  width: 6px;
}

::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.dialog-footer {
  text-align: right;
  padding: 10px 0;
}

.el-dialog__wrapper {
    display: flex;
    padding: 24px;
    .el-dialog {
        margin: auto !important;
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .edit-form-container {
    padding: 0 10px;
  }
  .label {
    font-size: 13px;
  }
}
</style>